18 серпня 2025 р.Українська

Розкрийте можливості зіставлення зразків у JavaScript за допомогою структурної деструктуризації. Вивчайте передові техніки, реальні приклади та найкращі практики для чистішого та зрозумілішого коду.

Зіставлення зразків у JavaScript: опанування структурної деструктуризації

У світі розробки на JavaScript, що постійно розвивається, написання чистого, лаконічного коду, який легко підтримувати, має першочергове значення. Однією з потужних технік, що допомагає досягти цієї мети, є структурна деструктуризація — форма зіставлення зразків, яка дозволяє витончено та точно видобувати значення зі структур даних (об'єктів та масивів). Ця стаття проведе вас через усі тонкощі структурної деструктуризації, надаючи практичні приклади та найкращі практики для вдосконалення ваших навичок JavaScript.

Що таке структурна деструктуризація?

Структурна деструктуризація — це функція ES6 (ECMAScript 2015), яка надає лаконічний спосіб видобування значень з об'єктів та масивів і присвоєння їх змінним. Замість доступу до властивостей за допомогою крапкової нотації (наприклад, object.property) або індексів масиву (наприклад, array[0]), деструктуризація дозволяє визначити зразок, що відповідає структурі даних, та автоматично присвоює значення відповідним змінним.

Уявіть це як витончену форму присвоєння, де ви визначаєте «форму» очікуваних даних, а JavaScript виконує видобування за вас. Це призводить до більш читабельного коду, який легше підтримувати, особливо при роботі зі складними структурами даних.

Деструктуризація об'єктів

Деструктуризація об'єктів дозволяє видобувати властивості з об'єкта та присвоювати їх змінним з такою ж назвою (або іншою, якщо ви бажаєте). Основний синтаксис такий:

            const { property1, property2 } = object;

Розглянемо практичний приклад. Припустимо, у вас є об'єкт користувача, що представляє користувача з глобальної платформи електронної комерції:

            const user = {
  id: 12345,
  firstName: "Aisha",
  lastName: "Khan",
  country: "Pakistan",
  email: "aisha.khan@example.com",
  preferences: {
    language: "Urdu",
    currency: "PKR"
  }
};

Базова деструктуризація об'єкта

Щоб видобути властивості firstName та lastName, ви можете використати:

            const { firstName, lastName } = user;

console.log(firstName); // Output: Aisha
console.log(lastName);  // Output: Khan

Перейменування змінних під час деструктуризації

Ви також можете присвоїти видобуті значення змінним з іншими іменами, використовуючи наступний синтаксис:

            const { firstName: givenName, lastName: familyName } = user;

console.log(givenName);  // Output: Aisha
console.log(familyName); // Output: Khan

Це особливо корисно, коли ви хочете уникнути конфліктів імен або використовувати більш описові назви змінних.

Значення за замовчуванням

Якщо властивість не існує в об'єкті, відповідній змінній буде присвоєно значення undefined. Щоб уникнути цього, ви можете надати значення за замовчуванням:

            const { age = 30 } = user;

console.log(age); // Output: 30 (since the user object doesn't have an 'age' property)

Вкладена деструктуризація об'єкта

Ви також можете деструктуризувати вкладені об'єкти. Наприклад, щоб видобути language та currency з об'єкта preferences:

            const { preferences: { language, currency } } = user;

console.log(language); // Output: Urdu
console.log(currency); // Output: PKR

Ви також можете перейменовувати змінні під час вкладеної деструктуризації:

            const { preferences: { language: preferredLanguage, currency: preferredCurrency } } = user;

console.log(preferredLanguage); // Output: Urdu
console.log(preferredCurrency); // Output: PKR

Комбінування можливостей

Ви можете поєднувати перейменування, значення за замовчуванням та вкладену деструктуризацію для ще більшої гнучкості:

            const {
  firstName: givenName,
  lastName: familyName,
  preferences: { language: preferredLanguage, currency: preferredCurrency = "USD" },
  age = 30
} = user;

console.log(givenName);          // Output: Aisha
console.log(familyName);         // Output: Khan
console.log(preferredLanguage);   // Output: Urdu
console.log(preferredCurrency);  // Output: PKR
console.log(age);               // Output: 30

Решта властивостей (Rest)

Іноді потрібно видобути певні властивості, а решту зібрати в новий об'єкт. Ви можете досягти цього за допомогою оператора залишку (...):

            const { id, firstName, lastName, ...remainingUserDetails } = user;

console.log(id);                   // Output: 12345
console.log(firstName);            // Output: Aisha
console.log(lastName);             // Output: Khan
console.log(remainingUserDetails); // Output: { country: "Pakistan", email: "aisha.khan@example.com", preferences: { language: "Urdu", currency: "PKR" } }

Деструктуризація масивів

Деструктуризація масивів схожа на деструктуризацію об'єктів, але вона використовує позиції індексів масиву для видобування значень. Основний синтаксис такий:

            const [element1, element2] = array;

Розглянемо приклад з масивом популярних туристичних напрямків у Японії:

            const destinations = ["Tokyo", "Kyoto", "Osaka", "Hiroshima"];

Базова деструктуризація масиву

Щоб видобути перші два напрямки, ви можете використати:

            const [firstDestination, secondDestination] = destinations;

console.log(firstDestination);  // Output: Tokyo
console.log(secondDestination); // Output: Kyoto

Пропуск елементів

Ви можете пропускати елементи в масиві, залишаючи порожнє місце в зразку деструктуризації:

            const [,, thirdDestination] = destinations;

console.log(thirdDestination); // Output: Osaka

Значення за замовчуванням

Подібно до деструктуризації об'єктів, ви можете надавати значення за замовчуванням для елементів масиву:

            const [first, second, third, fourth, fifth = "Nara"] = destinations;

console.log(fifth); // Output: Nara (since the array only has four elements)

Решта елементів (Rest)

Ви можете використовувати оператор залишку (...) для збору решти елементів масиву в новий масив:

            const [firstDestination, ...otherDestinations] = destinations;

console.log(firstDestination); // Output: Tokyo
console.log(otherDestinations);  // Output: ["Kyoto", "Osaka", "Hiroshima"]

Вкладена деструктуризація масиву

Ви також можете деструктуризувати вкладені масиви:

            const nestedArray = [1, [2, 3], 4];
const [one, [two, three], four] = nestedArray;

console.log(one);   // Output: 1
console.log(two);   // Output: 2
console.log(three); // Output: 3
console.log(four);  // Output: 4

Деструктуризація в параметрах функцій

Деструктуризація особливо корисна при роботі з параметрами функцій. Вона дозволяє видобувати певні властивості з об'єкта або масиву, переданого як аргумент, безпосередньо в сигнатурі функції.

Деструктуризація об'єкта в параметрах функції

Розглянемо функцію, яка відображає інформацію про користувача:

            function displayUserInfo({ firstName, lastName, country }) {
  console.log(`Name: ${firstName} ${lastName}, Country: ${country}`);
}

displayUserInfo(user); // Output: Name: Aisha Khan, Country: Pakistan

Це набагато чистіше і зрозуміліше, ніж прямий доступ до властивостей у тілі функції (наприклад, user.firstName).

Деструктуризація масиву в параметрах функції

Припустимо, у вас є функція, яка обчислює площу прямокутника, отримуючи його розміри у вигляді масиву:

            function calculateArea([width, height]) {
  return width * height;
}

const dimensions = [10, 5];
const area = calculateArea(dimensions);

console.log(area); // Output: 50

Поєднання зі значеннями за замовчуванням

Ви також можете поєднувати деструктуризацію зі значеннями за замовчуванням у параметрах функцій:

            function greetUser({ name = "Guest", greeting = "Hello" }) {
  console.log(`${greeting}, ${name}!`);
}

greetUser({ name: "Carlos" });     // Output: Hello, Carlos!
greetUser({});                    // Output: Hello, Guest!
greetUser({ greeting: "Bonjour" }); // Output: Bonjour, Guest!

Практичні приклади використання

Деструктуризацію можна застосувати в широкому діапазоні сценаріїв. Ось кілька практичних прикладів:

1. Відповіді API

При отриманні даних з API ви часто отримуєте відповіді у форматі JSON зі складною структурою. Деструктуризація може спростити процес видобування потрібних вам даних.

            async function fetchWeatherData(city) {
  const response = await fetch(`https://api.example.com/weather?q=${city}`);
  const data = await response.json();

  // Destructure the relevant data
  const { main: { temp, humidity }, weather: [{ description }] } = data;

  console.log(`Temperature: ${temp}°C, Humidity: ${humidity}%, Description: ${description}`);
}

fetchWeatherData("London");

2. Компоненти React

У React деструктуризація зазвичай використовується для видобування пропсів, переданих компонентам:

            function UserProfile({ firstName, lastName, email }) {
  return (
    <div>
      <h2>{firstName} {lastName}</h2>
      <p>Email: {email}</p>
    </div>
  );
}

3. Редюсери Redux

Деструктуризація спрощує роботу з діями та станом у редюсерах Redux:

            function cartReducer(state = initialState, action) {
  switch (action.type) {
    case "ADD_TO_CART":
      const { productId, quantity } = action.payload;
      // ...
      return { ...state, /* ... */ };
    default:
      return state;
  }
}

4. Об'єкти конфігурації

При роботі з об'єктами конфігурації деструктуризація полегшує видобування та використання конкретних налаштувань:

            const config = {
  apiKey: "YOUR_API_KEY",
  apiUrl: "https://api.example.com",
  timeout: 5000,
  retries: 3
};

const { apiKey, apiUrl, timeout } = config;

console.log(`Using API key: ${apiKey}, API URL: ${apiUrl}, Timeout: ${timeout}`);

5. Обмін значень змінних

Деструктуризація надає лаконічний спосіб обміну значень двох змінних без використання тимчасової змінної:

            let a = 1;
let b = 2;

[a, b] = [b, a];

console.log(a); // Output: 2
console.log(b); // Output: 1

Найкращі практики та рекомендації

Читабельність: Використовуйте деструктуризацію, щоб зробити ваш код більш читабельним та самодокументованим.
Підтримуваність: Деструктуризація може зменшити дублювання коду та полегшити його підтримку.
Складність: Уникайте надмірної деструктуризації, особливо з глибоко вкладеними об'єктами, оскільки це може ускладнити розуміння коду.
Значення за замовчуванням: Завжди розглядайте можливість надання значень за замовчуванням, щоб уникнути несподіваних значень undefined.
Обробка помилок: Пам'ятайте про потенційні помилки при деструктуризації, особливо при роботі з зовнішніми джерелами даних, такими як API. Розгляньте можливість додавання механізмів обробки помилок для коректної роботи з відсутніми або недійсними даними.
Стиль коду: Дотримуйтесь єдиних правил стилю кодування, щоб забезпечити одноманітне використання деструктуризації у вашій кодовій базі.

Просунуті техніки

Динамічні імена властивостей

Хоча деструктуризація зазвичай включає відомі імена властивостей, ви можете використовувати обчислювані імена властивостей (введені в ES6) для деструктуризації властивостей з динамічними ключами. Однак це менш поширено і вимагає ретельного розгляду.

            const key = 'dynamicProperty';
const obj = { [key]: 'Value' };

// Note: Cannot directly destructure with dynamic keys like this
// const { [key]: value } = obj; // This doesn't work as expected

// Instead, you'd typically access it directly or use an intermediate variable
const value = obj[key];
console.log(value); // Output: Value

Хоча це не є прямою функцією деструктуризації, обчислювані імена властивостей можна використовувати *у поєднанні* з деструктуризацією в деяких сценаріях для більш динамічної маніпуляції даними, якщо ключ відомий на момент деструктуризації, але зберігається у змінній.

Деструктуризація з функціями, що повертають об'єкти або масиви

Ви можете безпосередньо деструктуризувати результат виклику функції, якщо функція повертає об'єкт або масив. Це може бути корисно для видобування даних зі складних операцій.

            function createPoint() {
  return { x: 10, y: 20 };
}

const { x, y } = createPoint();
console.log(x, y); // Output: 10 20

function getCoordinates() {
  return [30, 40];
}

const [latitude, longitude] = getCoordinates();
console.log(latitude, longitude); // Output: 30 40

Висновок

Структурна деструктуризація — це потужна функція JavaScript, яка покращує читабельність, підтримуваність та лаконічність коду. Опанувавши деструктуризацію об'єктів та масивів, ви зможете писати більш елегантний та ефективний код, особливо при роботі зі складними структурами даних. Використовуйте деструктуризацію у своїх проектах на JavaScript, щоб розкрити її повний потенціал та підвищити свої навички програмування. Не забувайте збалансовувати потужність деструктуризації з ясністю та підтримуваністю коду, щоб ваш код залишався легким для розуміння та налагодження.

Впроваджуючи структурну деструктуризацію у свій робочий процес, ви не лише покращите якість свого коду, але й глибше зрозумієте можливості JavaScript. Це, у свою чергу, зробить вас більш кваліфікованим та цінним розробником JavaScript у сучасному динамічному технологічному світі.